<script setup lang="js">
import { onMounted,reactive,ref } from 'vue';
import axios from 'axios';
const config = reactive({
    radius: '40%',
        activeRadius: '45%',
data: [],
digitalFlopStyle: {
            fontSize: 20
        },
        colors: ['#FF5733', '#33FF57', '#5733FF', /* 更多颜色值，数量与数据项匹配 */],
    showLegend: true, // 是否显示图例
    title: '不同空气质量指数天数占比'

})
function getData(){
//-:获取服务器数据
axios.get('/api/queryAllAirQualityCounts')
.then((response)=>{
console.log(response.data)
if(response.data.code==200){
    const processedData = [];
    for (const item of response.data.data) {
        if (typeof item.airQualityIndexLabel === 'string' && typeof item.daysCount === 'number') {
            processedData.push({
                name: item.airQualityIndexLabel,
                value: item.daysCount
            });
        }
    }
    config.data = processedData;
}
})
}
onMounted(()=>{
getData();
})

   
    
 </script>
 <template>
    <dv-border-box-1 class="dv-border-box-1">
        <div style="padding-top: 10px;">不同空气质量指数天数占比</div>
        <dv-active-ring-chart class="dv-active-ring-chart" :config="config" 
style="width:100%;height:300px"/>
    </dv-border-box-1> 
        
 </template>
 <style lang="css" scoped>
 .dv-border-box-1{
        display: flex;
        flex: 1;
        justify-content: space-between;
        flex-direction: column;
    }
    .dv-active-ring-chart{
       
    }
    
    
 </style>